<template>
    <div id="mountNode"></div>
</template>

<script>
import G6 from '@antv/g6'
const minimap = new G6.Minimap({
    size: [100, 100],
    className: 'mininMap',
    type: 'delegate',
})
const grid = new G6.Grid()
export default {
    async mounted() {
        // const data = {
        //     nodes:[
        //         {
        //             id:'node1',
        //             x:100,
        //             y:100,
        //             label:"起始点"
        //         },
        //         {
        //             id:'node2',
        //             x:200,
        //             y:300,
        //             label:"结束点"
        //         },
        //     ],
        //     edges:[
        //         {
        //             source:'node1',
        //             target:'node2',
        //             label:"我是连线"
        //         }
        //     ]
        // };
        const graph = new G6.Graph({
            container: 'mountNode',
            width: 600,
            height: 800,
            // fitView: true,
            // fitViewPadding: [20, 40, 50, 20],
            layout: {
                type: 'force',
                preventOverlap: true,
                linkDistance: 100,
            },
            plugins: [minimap, grid],
            defaultNode: {
                size: 30,
                style: {
                    fill: 'steelblue',
                    stroke: '#666',
                    lineWidth: 1,
                },
                labelCfg: {
                    style: {
                        fill: '#fff',
                    },
                },
            },
            defaultEdge: {
                style: {
                    opacity: 0.6,
                    stroke: 'grey',
                },
                labelCfg: {
                    autoRotate: true,
                },
            },
            modes: {
                default: [
                    'drag-canvas',
                    'zoom-canvas',
                    'drag-node',
                    {
                        type: 'tooltip',
                        formatText(model) {
                            const text =
                                'label: ' +
                                model.label +
                                '<br/>class: ' +
                                model.class
                            return text
                        },
                    },
                    {
                        type:'edge-tooltip',
                        formatText(model){
                            const text = 
                            'source: ' + 
                            model.source +
                            '<br/>target: '+
                            '<br/>weight: '+
                            model.weight;
                            return text;
                        }
                    }
                ],
            },
            nodeStateStyles: {
                hover: {
                    fill: 'lightsteelblue',
                },
                click: {
                    stroke: '#000',
                    lineWidth: 3,
                },
            },
            edgeStateStyles: {
                click: {
                    stroke: 'steelblue',
                },
            },
        })
        graph.on('node:mouseenter', (e) => {
            const nodeItem = e.item
            graph.setItemState(nodeItem, 'hover', true)
        })
        graph.on('node:mouseleave', (e) => {
            const nodeItem = e.item
            graph.setItemState(nodeItem, 'hover', false)
        })
        graph.on('node:click', (e) => {
            const clickNodes = graph.findAllByState('node', 'click')
            clickNodes.forEach((cn) => {
                graph.setItemState(cn, 'click', false)
            })
            const nodeItem = e.item
            graph.setItemState(nodeItem, 'click', false)
        })
        graph.on('edge:click', (e) => {
            const clickEdges = graph.findAllByState('edge', 'click')
            clickEdges.forEach((cn) => {
                graph.setItemState(cn, 'click', false)
            })
            const edgeItem = e.item
            graph.setItemState(edgeItem, 'click', true)
        })
        const main = async () => {
            const response = await fetch(
                'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'
            )
            const remoteData = await response.json()
            // graph.data(remoteData);
            const nodes = remoteData.nodes
            nodes.forEach((node) => {
                if (!node.style) {
                    node.style = {}
                }
                switch (node.class) {
                    case 'c0':
                        node.type = 'circle'
                        break
                    case 'c1':
                        node.type = 'rect'
                        node.size = [35, 20]
                        break
                    case 'c2':
                        node.type = 'ellipse'
                        node.size = [30, 20]
                        break
                    default:
                        break
                }
            })
            const edges = remoteData.edges
            edges.forEach((edge) => {
                if (!edge.style) {
                    edge.style = {}
                }
                edge.style.lineWidth = edge.weight
                edge.style.opacity = 0.6
                edge.style.stroke = 'grey'
            })
            graph.data(remoteData)
            graph.render()
        }
        main()
        // graph.data(data);
        // graph.render();
    },
}
</script>

<style>
.g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #545454;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}
</style>